/*
 * @Descripttion:
 * @version: 1.0.0
 * @Author: Shentong
 * @Date: 2021-04-09 12:34:34
 * @LastEditors: Shentong
 * @LastEditTime: 2021-10-27 21:57:54
 */
// eslint-disable-next-line @typescript-eslint/no-use-before-define
import React, { useEffect, useState, useCallback } from "react";
import Taro from '@tarojs/taro'

 import { View } from "@tarojs/components";
 import { AtDrawer, AtList, AtListItem } from 'taro-ui'

 import styles from './index.module.scss'

 const SelectTimeDrawer = (props) => {
  const { showDrawer = false, timeList = [], drawerClose } = props
  const [orderTimesList, setOrderTimesList] = useState([])

  const [curYear, setCurYear] = useState('')
  const [list, setList] = useState([])
  // const [curTimer, setCurTimer] = useState('')

  const yearClick = (yearItem, index) => {
    setCurYear(yearItem.date)
    setOrderTimesList(list[index].orderTimes)
  }
  const timeClick = ({time}) => {
    // setCurTimer(time)
    drawerClose(curYear, time)
  }

  const drawerCloseClick = () => {
    drawerClose('', '')
  }

  // console.log('SelectTimeDrawer-props', props)

   useEffect(() => {
    setList([...timeList])
   }, [timeList, showDrawer]);

   useEffect(()=> {
    if (list.length) {
      const [firstDate] = list
      setCurYear(firstDate.date)
      setOrderTimesList(firstDate.orderTimes)
   }
   }, [list])


   return (
     <View className={styles.drawerContainer}>
        <AtDrawer
          onClose={drawerCloseClick}
          show={showDrawer}
          mask
          right
          width={'300px'}
        >
          <View className={styles.drawerContent}>
              <View className={styles.yearList}>
                <AtList>
                  {
                    timeList.map((item, tIndex) => {
                      return <AtListItem title={item.date} key={tIndex} onClick={() => yearClick(item, tIndex)} />
                    })
                  }
                </AtList>
              </View>
              <View className={styles.timeList}>
              <AtList>
                  {
                    orderTimesList.map((item, oIndex) => {
                      return <AtListItem title={item.time} key={oIndex} onClick={() => timeClick(item)} />
                    })
                  }
                </AtList>
              </View>
          </View>
        </AtDrawer>
     </View>
   );
 }

 export default SelectTimeDrawer

